<!DOCTYPE html>
<html>
<head>
  <title>Froala Design Blocks - Headers</title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />

  <script src="http://localhost:35729/livereload.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

  <link type="text/css" rel="stylesheet" href="./css/froala_blocks.css">

  <style>
    .fdb-block {
      border-bottom: solid 1px #EEE;
    }
  </style>
</head>
<body>
  <header>
    <div class="container">
      <nav class="navbar">
        <a href="https://www.froala.com">
          <img src="./imgs/img_logo.png" height="30" alt="image">
        </a>
      </nav>
    </div>
  </header>

  <header>
    <div class="container text-center">
      <nav class="navbar">
        <a class="ml-auto mr-auto" href="https://www.froala.com">
          <img src="./imgs/img_logo.png" height="30" alt="image">
        </a>
      </nav>
    </div>
  </header>

  <header>
    <div class="container">
      <nav class="navbar navbar-expand-md">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav0" aria-controls="navbarNav0" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav0">
          <ul class="navbar-nav mr-auto ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>

  <header>
    <div class="container">
      <nav class="navbar navbar-expand-md">
        <a class="navbar-brand" href="https://www.froala.com">
          <img src="./imgs/img_logo.png" height="30" alt="image">
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav1">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
          </ul>

          <ul class="navbar-nav justify-content-end d-none d-lg-flex ml-md-auto">
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com"><i class="fa fa-slack"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com"><i class="fa fa-twitter"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com"><i class="fa fa-github"></i></a>
            </li>
          </ul>

          <a class="btn btn-empty ml-md-3" href="https://www.froala.com">Button</a>
        </div>
      </nav>
    </div>
  </header>

  <header>
    <div class="container">
      <nav class="navbar navbar-expand-md no-gutters">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2" aria-controls="navbarNav2" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="col-4 col-md-2 text-right text-md-center order-lg-6">
          <a href="https://www.froala.com">
            <img src="./imgs/img_logo.png" height="30" alt="image">
          </a>
        </div>

        <div class="collapse navbar-collapse col-12 col-md-5 order-lg-1" id="navbarNav2">
          <ul class="navbar-nav col-5">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
          </ul>
        </div>

        <ul class="navbar-nav justify-content-end col-sm-5 order-lg-12 d-none d-md-flex">
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com"><i class="fa fa-twitter"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com"><i class="fa fa-github"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com"><i class="fa fa-slack"></i></a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <header>
    <div class="container">
      <nav class="navbar navbar-expand-md">
        <a class="navbar-brand" href="https://www.froala.com">
          <img src="./imgs/img_logo.png" height="30" alt="image">
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav3" aria-controls="navbarNav3" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav3">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">About</a>
            </li>
          </ul>

          <a class="btn btn-empty ml-md-3" href="https://www.froala.com">Button</a>
        </div>
      </nav>
    </div>
  </header>

  <header>
    <div class="container">
      <nav class="navbar navbar-expand-md no-gutters">
        <div class="col-2 text-left">
          <a href="https://www.froala.com">
            <img src="./imgs/img_logo.png" height="30" alt="image">
          </a>
        </div>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-center col-md-8" id="navbarNav4">
          <ul class="navbar-nav justify-content-center">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
          </ul>
        </div>

        <ul class="navbar-nav col-2 justify-content-end d-none d-md-flex">
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com"><i class="fa fa-facebook"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com"><i class="fa fa-twitter"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com"><i class="fa fa-github"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com"><i class="fa fa-google"></i></a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <header>
    <div class="container">
      <nav class="navbar navbar-expand-lg">
        <a class="navbar-brand" href="https://www.froala.com">
          <img src="./imgs/img_logo.png" height="30" alt="image">
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav5" aria-controls="navbarNav5" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav5">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
          </ul>

          <ul class="navbar-nav justify-content-end ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Docs</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Log In</a>
            </li>
          </ul>

          <a class="btn ml-md-3" href="https://www.froala.com">Button</a>
        </div>
      </nav>
    </div>
  </header>

  <header>
    <div class="container">
      <nav class="navbar navbar-expand-md no-gutters">
        <div class="col-2 text-left">
          <a href="https://www.froala.com">
            <img src="./imgs/img_logo.png" height="30" alt="image">
          </a>
        </div>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse-1" aria-controls="navbarNav6" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-center col-md-8 navbar-collapse-1">
          <ul class="navbar-nav justify-content-center">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Contact</a>
            </li>
          </ul>
        </div>

        <div class="collapse navbar-collapse justify-content-end col-md-2 navbar-collapse-1">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Log In &rarr;</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>

  <header>
    <div class="container">
      <nav class="navbar navbar-expand-md no-gutters">
        <div class="col-3 text-left">
          <a href="https://www.froala.com">
            <img src="./imgs/img_logo.png" height="30" alt="image">
          </a>
        </div>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse-2" aria-controls="navbarNav7" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse navbar-collapse-2 justify-content-center col-md-6" id="navbarNav7">
          <ul class="navbar-nav justify-content-center">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Contact</a>
            </li>
          </ul>
        </div>

        <div class="collapse navbar-collapse navbar-collapse-2">
          <ul class="navbar-nav ml-auto justify-content-end">
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Log In</a>
            </li>
          </ul>

          <a class="btn ml-md-3" href="https://www.froala.com">Register</a>
        </div>
      </nav>
    </div>
  </header>

  <header class="bg-dark">
    <div class="container">
      <nav class="navbar">
        <a href="https://www.froala.com">
          <img src="./imgs/img_logo.png" height="30" alt="image">
        </a>
      </nav>
    </div>
  </header>

  <header class="bg-dark">
    <div class="container text-center">
      <nav class="navbar">
        <a class="ml-auto mr-auto" href="https://www.froala.com">
          <img src="./imgs/img_logo.png" height="30" alt="image">
        </a>
      </nav>
    </div>
  </header>

  <header class="bg-dark">
    <div class="container">
      <nav class="navbar navbar-expand-md">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav8" aria-controls="navbarNav8" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav8">
          <ul class="navbar-nav mr-auto ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>

  <header class="bg-dark">
    <div class="container">
      <nav class="navbar navbar-expand-md">
        <a class="navbar-brand" href="https://www.froala.com">
          <img src="./imgs/img_logo.png" height="30" alt="image">
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav9" aria-controls="navbarNav9" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav9">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
          </ul>

          <ul class="navbar-nav justify-content-end d-none d-lg-flex ml-md-auto">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com"><i class="fa fa-slack"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com"><i class="fa fa-twitter"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com"><i class="fa fa-github"></i></a>
            </li>
          </ul>

          <a class="btn btn-white btn-empty ml-md-3" href="https://www.froala.com">Button</a>
        </div>
      </nav>
    </div>
  </header>

  <header class="bg-dark">
    <div class="container">
      <nav class="navbar navbar-expand-md no-gutters">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav10" aria-controls="navbarNav10" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="col-4 col-sm-2 text-center order-lg-6">
          <a href="https://www.froala.com">
            <img src="./imgs/img_logo.png" height="30" alt="image">
          </a>
        </div>

        <div class="collapse navbar-collapse col-12 col-md-5 order-lg-1" id="navbarNav10">
          <ul class="navbar-nav col-5">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
          </ul>
        </div>

        <ul class="navbar-nav justify-content-end col-sm-5 order-lg-12 d-none d-md-flex">
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com"><i class="fa fa-twitter"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com"><i class="fa fa-github"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com"><i class="fa fa-slack"></i></a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <header class="bg-dark">
    <div class="container">
      <nav class="navbar navbar-expand-md">
        <a class="navbar-brand" href="https://www.froala.com">
          <img src="./imgs/img_logo.png" height="30" alt="image">
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav11" aria-controls="navbarNav11" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav11">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">About</a>
            </li>
          </ul>

          <a class="btn btn-white btn-empty ml-md-3" href="https://www.froala.com">Button</a>
        </div>
      </nav>
    </div>
  </header>

  <header class="bg-dark">
    <div class="container">
      <nav class="navbar navbar-expand-md no-gutters">
        <div class="col-2 text-left">
          <a href="https://www.froala.com">
            <img src="./imgs/img_logo.png" height="30" alt="image">
          </a>
        </div>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav12" aria-controls="navbarNav12" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-center col-md-8" id="navbarNav12">
          <ul class="navbar-nav justify-content-center">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
          </ul>
        </div>

        <ul class="navbar-nav col-2 justify-content-end d-none d-md-flex">
          <li class="nav-item active">
            <a class="nav-link" href="https://www.froala.com"><i class="fa fa-facebook"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com"><i class="fa fa-twitter"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com"><i class="fa fa-github"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com"><i class="fa fa-google"></i></a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <header class="bg-dark">
    <div class="container">
      <nav class="navbar navbar-expand-lg">
        <a class="navbar-brand" href="https://www.froala.com">
          <img src="./imgs/img_logo.png" height="30" alt="image">
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav13" aria-controls="navbarNav13" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav13">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
          </ul>

          <ul class="navbar-nav justify-content-end ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Docs</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Log In</a>
            </li>
          </ul>

          <a class="btn btn-white ml-md-3" href="https://www.froala.com">Button</a>
        </div>
      </nav>
    </div>
  </header>

  <header class="bg-dark">
    <div class="container">
      <nav class="navbar navbar-expand-md no-gutters">
        <div class="col-2 text-left">
          <a href="https://www.froala.com">
            <img src="./imgs/img_logo.png" height="30" alt="image">
          </a>
        </div>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse-3" aria-controls="navbarNav6" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-center col-md-8 navbar-collapse-3">
          <ul class="navbar-nav justify-content-center">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Contact</a>
            </li>
          </ul>
        </div>

        <div class="collapse navbar-collapse justify-content-end col-md-2 navbar-collapse-3">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Log In &rarr;</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>

  <header class="bg-dark">
    <div class="container">
      <nav class="navbar navbar-expand-md no-gutters">
        <div class="col-3 text-left">
          <a href="https://www.froala.com">
            <img src="./imgs/img_logo.png" height="30" alt="image">
          </a>
        </div>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse-4" aria-controls="navbarNav7" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse navbar-collapse-4 justify-content-center col-md-6" id="navbarNav7">
          <ul class="navbar-nav justify-content-center">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Contact</a>
            </li>
          </ul>
        </div>

        <div class="collapse navbar-collapse navbar-collapse-4">
          <ul class="navbar-nav ml-auto justify-content-end">
            <li class="nav-item">
              <a class="nav-link" href="https://www.froala.com">Log In</a>
            </li>
          </ul>

          <a class="btn ml-md-3" href="https://www.froala.com">Register</a>
        </div>
      </nav>
    </div>
  </header>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
